<template>
  <div class="about">
    <input type="text" placeholder="请输入任务名称"  v-model="value">
    <span @click="handleClick">新增</span>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        value:''
      }
    },
    methods:{
      handleClick(){
            if( this.value ){
                //调用数据仓库中的同步方法addTask, 新增一个任务, 并保存到数据仓库中的state.tasklist中
                this.$store.commit('addTask', this.value );
                this.value = '';//清空输入框
            }else{
                alert('请输入任务名称')
            }
        }
    }
  }
</script>

<style lang="scss">
  .about{
    // width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    input{
      width: 80%;
      height: 35px;
      background-color: #f5f5f5;
      border: none;
      margin-right: 5px;
    }
    span{
      color: lightblue;
    }
  }
</style>
